<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Custom DataGrid Pager - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.11/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.11./themes/icon.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.6.11/demo/demo.css">
	<script type="text/javascript" src="jquery-easyui-1.6.11/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.6.11/jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Custom DataGrid Pager</h2>
	<p>You can append some buttons to the standard datagrid pager bar.</p>
	
	
	<div class="easyui-panel" title="用户检索" style="width:400px">
		<div style="padding:10px 60px 20px 60px">
	    	<table cellpadding="5">
	    		<tr>
	    			<td>姓名:</td>
	    			<td>
	    				<input class="easyui-textbox" type="text" id="name" />
	    			</td>
	    		</tr>
	    		
	    		<tr>
	    			<td>年龄:</td>
	    			<td>
	    				<input class="easyui-textbox" style="width:60px" type="number" id="startAge" />
	 	  				~
	    				<input class="easyui-textbox" style="width:60px" type="number" id="endAge" />
	    			</td>
	    		</tr>
	    		
	    		<tr>
	    			<td>性别:</td>
	    			<td>
	    				<input  type="radio" id="sex" name="a" value="0"/>男
	    				<input  type="radio" id="sex" name="a" value="1"/>女
	    				<input  type="radio" id="sex" name="a" value="-1" checked="checked"/>不限
	    			</td>
	    		</tr>
	    		
	    		</tr>
	    			<td>住址:</td>
	    			<td>
	    				<select  id="address">
	    			</td>
	    		</tr>
	    		
	    	</table>
	    <div style="text-align:center;padding:5px">
	    	<a href="javascript:searchUser()" class="easyui-linkbutton" >搜索</a>
	    </div>
	    </div>
	</div>
	
	
	
	<div style="margin:20px 0;"></div>
	<table id="dg" title="用户信息表" style="width:700px;height:500px">
	</table>
	
	<script type="text/javascript">
		$('#dg').datagrid({
			width:'60%',
			url:'alluser.json',
			method:'post',
			loadMsg:'正在加载用户信息',
			pagination:true,
			columns:[[
				{field:'userId',title:'编号',width:100},
				{field:'userName',title:'姓名',width:150},
				{field:'userAge',title:'年龄',width:100},
				{field:'userSex',title:'性别',width:150},
				{field:'userAddress',title:'住址',width:200},
			]]
		});
		
		
	</script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$.post("alladdress",function(data){
				$("#address").html(data);
			})
		})
	</script>
	
	<script type="text/javascript">
		function searchUser() {
			
			var name = $("#name").val();
			var startAge = $("#startAge").val();
			var endAge = $("#endAge").val();
			var sex = $(":checked").eq(0).val();
			var address = $(":selected").text();
			
			// 更新datagrid的URL
			$("#dg").datagrid("options").url = "usersearch.json?name="+name+"&startAge="+startAge+"&endAge="+endAge+"&sex="+sex+"&address="+address;
			// 刷新table
			$('#dg').datagrid("reload");
		}
	</script>
	
	
</body>
<html>
